<template>
  <div class="app-content-wrap" :style="'minHeight:' + gHeight + 'px;'">
    <div class="g-content-title">通行记录</div>

    <!-- 搜索框 -->
    <el-form ref="form" :model="form" size="small">
      <el-row :gutter="15">
        <el-col :span="8">
          <el-form-item>
            <el-col :span="12">
              <el-date-picker type="datetime" value-format="yyyy-MM-dd" placeholder="选择开始日期" v-model="form.dateLowerBound" style="width: 100%;"></el-date-picker>
            </el-col>
            <el-col class="line" :span="1">-</el-col>
            <el-col :span="11">
              <el-date-picker type="datetime" @change="dateChangeEndTime" value-format="yyyy-MM-dd" placeholder="选择结束日期" v-model="form.dateUpperBound" style="width: 100%;"></el-date-picker>
            </el-col>
          </el-form-item>
        </el-col>
        <el-col :span="4">
          <el-form-item>
            <el-select v-model="form.subType" placeholder="全部车辆进出类型">
              <el-option v-for="item in subTypeArr" :key="item.value" :value="item.value" :label="item.name">
              </el-option>
            </el-select>
          </el-form-item>
        </el-col>
        <el-col :span="4">
          <el-form-item>
            <el-col>
              <el-select v-model="form.subType" placeholder="全部停车场">
                <el-option v-for="item in subTypeArr" :key="item.value" :value="item.value" :label="item.name">
                </el-option>
              </el-select>
            </el-col>
          </el-form-item>
        </el-col>
        <el-col :span="4">
          <el-form-item>
            <el-col>
              <el-input placeholder="请输入车牌号" v-model="form.eventID"></el-input>
            </el-col>
          </el-form-item>
        </el-col>
        <el-col :span="4">
          <el-form-item>
            <el-button type="primary" icon="el-icon-search" @click="onSubmit">搜 索</el-button>
            <!--<el-button>重置</el-button>-->
          </el-form-item>
        </el-col>
      </el-row>
    </el-form>

    <!-- 列表 -->
    <el-table :data="tableData" stripe border class="el-table-body" v-if="showList">
      <el-table-column prop="eventId" label="事件编号" min-width="150">
      </el-table-column>
      <el-table-column prop="areaName" label="所属" min-width="200">
      </el-table-column>
      <el-table-column prop="moduleName" label="事件类型" min-width="140">
      </el-table-column>
      <el-table-column prop="eventTime" label="时间" min-width="150">
      </el-table-column>
      <el-table-column prop="submitType" :formatter="submitTypeToText" label="提交类型" min-width="70">
      </el-table-column>
      <el-table-column prop="eventState" min-width="70" label="图片">
        <template slot-scope="scope">
          <svg v-if="scope.row.moduleCode == 1002" @click="showImg(scope.row)" xmlns="http://www.w3.org/2000/svg" width="18.946" height="17.964" viewBox="0 0 23.946 21.964">
            <g id="图_片" data-name="图 片" transform="translate(-2.453 -20.041)">
              <path id="路径_288" data-name="路径 288" d="M23.323,20.041H5.562a3.078,3.078,0,0,0-3.078,3.078V37.67a.925.925,0,0,0,0,.468v.79a3.079,3.079,0,0,0,3.078,3.077H23.323A3.078,3.078,0,0,0,26.4,38.929V23.118A3.078,3.078,0,0,0,23.323,20.041ZM5.562,21.915H23.323a1.208,1.208,0,0,1,1.2,1.2V34.8a20.615,20.615,0,0,0-2.416-2.788,2.2,2.2,0,0,0-1.877-.589c-1.118.16-2.342,1.09-3.741,2.837-.335.415-.637.829-.883,1.183-1.231-1.7-3.653-4.836-5.706-6.281a2.159,2.159,0,0,0-1.988-.3,4.774,4.774,0,0,0-2.241,1.96A17.605,17.605,0,0,0,4.351,33.1V23.119a1.208,1.208,0,0,1,1.211-1.2Z" fill="#c0c4cc" />
              <path id="路径_289" data-name="路径 289" d="M677.888,281.8a1.628,1.628,0,1,0,1.628-1.628A1.628,1.628,0,0,0,677.888,281.8Z" transform="translate(-660.362 -254.328)" fill="#c0c4cc" />
            </g>
          </svg>
        </template>
      </el-table-column>
      <el-table-column prop="eventState" min-width="70" label="视频">
        <template slot-scope="scope">
          <svg v-if="scope.row.moduleCode == 1002" @click="showVideo(scope.row)" xmlns="http://www.w3.org/2000/svg" width="26.49" height="17.294" viewBox="0 0 30.49 18.294">
            <path id="视频" d="M87,246.5l4.116-2.361c.762-.457,1.372-.075,1.372.688v11.969c0,.837-.61,1.142-1.372.684L87,255.111c-.762-.457-1.372-.915-1.372-1.677V248.1C85.63,247.336,86.239,246.956,87,246.5ZM80.446,242H64.9a2.9,2.9,0,0,0-2.9,2.9v12.5a2.9,2.9,0,0,0,2.9,2.9h15.55a2.9,2.9,0,0,0,2.9-2.9V244.9A2.893,2.893,0,0,0,80.446,242Zm-9.377,7.013a2.8,2.8,0,0,1-2.06,2.134,2.644,2.644,0,0,1-3.124-3.127,2.611,2.611,0,0,1,2.056-2.06A2.551,2.551,0,0,1,71.069,249.013Zm0,0" transform="translate(-62 -242)" fill="#c0c4cc" />
          </svg>
        </template>
      </el-table-column>
      <el-table-column prop="eventState" :formatter="eventStateToText" min-width="70" label="处理状态">
      </el-table-column>
      <el-table-column label="操作" min-width="140" align="center">
        <template slot-scope="scope">
          <el-button @click="viewDetail(scope.row)" type="text" size="small">查看详情</el-button>
          <el-button @click="disposeEvent(scope.row)" type="text" size="small">事件处理</el-button>
          <el-button @click="deleteEvent(scope.row)" type="text" size="small">删除</el-button>
        </template>
      </el-table-column>
    </el-table>
    <div class="list">
      <el-card :body-style="{ padding: '0px' }" v-for="i in 5" :key="i">
        <img src="../../assets/images/131.png" class="image">
        <div style="padding: 14px;">
          <div class="type-list">
            <div class="item" v-for="j in 4" :key="j"><i class="el-icon-info"></i><span class="label">车牌:</span><span>沪CBQD393</span></div>
          </div>
        </div>
      </el-card>
    </div>

    <el-pagination background @current-change="changeEventTable" :current-page.sync="form.page" :page-size="form.limit" layout="total, prev, pager, next,jumper" :total="totalCount" class="el-page-body" v-if="showList">
    </el-pagination>

    <el-dialog title="图片预览" :visible.sync="imgIsShow">
      <img style="width: 100%;height: 400px;" :src="currentImg" />
    </el-dialog>
    <el-dialog title="视频预览" :visible.sync="videoIsShow">
      <video controls style="width: 100%;height: 400px;" :src="currentVideo"></video>
    </el-dialog>

  </div>
</template>

<script>
import areaSelect from '../../components/common/select/area'
import sceneSelect from '../../components/common/select/scene'

export default {
  name: 'carTraffic',
  components: {
    areaSelect,
    sceneSelect
  },

  data () {
    return {
      gHeight: this.$store.state.gHeight,
      areaIds: {
        areaId1: '', // 所属1级
        areaId2: '', // 所属2级
        areaId3: '' // 所属3级
      },
      modTypes: {
        modType1: '', // 场景分类
        modType2: '' // 场景子分类
      },
      form: {
        eventID: '', // 事件编号
        areaID: '', // 所属
        modType: '', // 场景类型
        eventState: '', // 处理状态
        subType: '', // 提交类型
        content: '', // 事件内容
        dateLowerBound: '', // 开始时间
        dateUpperBound: '', // 结束时间
        page: 1,
        limit: 10
      },
      totalCount: 0, // 总数
      tableData: [], // 列表数据
      eventStateArr: [],
      subTypeArr: [],
      showList: true,
      imgIsShow: false,
      videoIsShow: false,
      currentImg: '',
      currentVideo: ''
    }
  },
  // 监听路由进入
  // beforeRouteEnter(to, from, next) {
  //   // 如果不是从详情页过来，则强制刷新
  //   next((vm) => {
  //     if (from.name !== 'eventSearchDetail') {
  //       // 重置data的值
  //       Object.assign(vm.$data, vm.$options.data());
  //       vm.init();
  //     }
  //   });
  // },
  beforeRouteLeave (to, from, next) {
    if (to.name !== 'eventSearchDetail') {
      this.$store.commit('keepOut')
    }
    next()
  },
  beforeRouteEnter (to, from, next) {
    next((vm) => {
      vm.$store.commit('keepIn', 'eventSearch')
    })
  },

  mounted: function () {
    this.init()
  },

  methods: {
    // 监测结束时间
    dateChangeEndTime () {
      let startTime = this.timeToStamp(this.form.dateLowerBound)
      let endTime = this.timeToStamp(this.form.dateUpperBound)
      if (startTime > endTime) {
        this.$message({
          type: 'warning',
          message: '结束时间必须小于开始时间！'
        })
        this.form.dateUpperBound = ''
      }
    },
    showImg (item) {
      if (!item.eventImage) return

      this.currentImg = item.eventImage
      this.imgIsShow = true
    },
    showVideo (item) {
      if (!item.eventVideo) return

      this.currentVideo = item.eventVideo
      this.videoIsShow = true
    },
    // 日期转时间戳
    timeToStamp (time) {
      let d = new Date(time)
      let stamp = d.getTime()
      return stamp
    },
    // 页面初始方法
    init () {
      this.eventStateArr = this.$base.getConst('select', 'eventState')
      this.subTypeArr = this.$base.getConst('select', 'submitType')

      let userInfoRes = JSON.parse(this.$base.getSessionStorage('userInfo'))
      let currentUserRole = userInfoRes.userRole
      if (currentUserRole !== 1) {
        this.refreshTable()
      } else {
        this.showList = false
      }
    },
    // 所属变化时
    onAreaChange (val) {
      this.form.areaID = val
    },
    onSceneChange (val) {
      this.form.modType = val
    },
    onSubmit () {
      this.form.page = 1

      // this.refreshTable()
      // this.$router.replace({name: 'eventSearch', query: this.form})
    },
    // 提交类型转换成文字
    submitTypeToText: function (row) {
      return this.$base.getNameByConst('select', 'submitType', row.submitType)
    },
    // 处理状态转换成文字
    eventStateToText: function (row) {
      return this.$base.getNameByConst('select', 'eventState', row.eventState)
    },
    // 切换页码
    changeEventTable: function (val) {
      this.form.page = val
      this.refreshTable()
      // this.$router.replace({name: 'eventSearch', query: this.form})
    },
    // 拉取表格信息
    refreshTable: function () {
      this.showList = true
      let _this = this
      let url = this.$base.getUrl('infoByType')
      let params = {
        url: url,
        data: this.form
      }
      this.$store.dispatch('getForm', params).then((res) => {
        let data = res.page
        if (data.list) {
          _this.tableData = data.list
        } else {
          _this.tableData = []
        }

        _this.totalCount = data.totalCount
      })
    },
    // 查看详情
    viewDetail: function (row) {
      this.$router.push({
        name: 'eventSearchDetail',
        query: {
          'eventSysId': row.eventSysId
        }
      })
    },
    // 消音
    handleCloseVoice (equipmentId) {
      let url = this.$base.getUrl('jiaCancelSmoke')
      let params = {
        url: url,
        data: {
          equipmentId: equipmentId
        }
      }
      this.$store.dispatch('getForm', params).then((res) => {
        if (res.code === 0) {
          this.$message({
            type: 'success',
            message: '消音成功!'
          })
        }
      })
    },
    handleEventOperate (eventSysId, eventState, equipmentId) {
      let url = this.$base.getUrl('jiaEventOperate')
      let params = {
        url: url,
        data: {
          eventSysId: eventSysId,
          eventState: eventState.toString()
        }
      }
      this.$store.dispatch('getForm', params).then((res) => {
        if (res.code === 0) {
          this.refreshTable()
          this.$message({
            type: 'success',
            message: '处理成功!'
          })
          this.handleCloseVoice(equipmentId)
        }
      })
    },
    // 事件处理
    disposeEvent (row) {
      this.$confirm('如何处理该事件?', {
        distinguishCancelAndClose: true,
        confirmButtonText: '处理',
        cancelButtonText: '误报'
      }).then(() => {
        this.handleEventOperate(row.eventSysId, '1', row.equipmentId)
      }).catch((action) => {
        console.log(action)
        if (action === 'cancel') {
          this.handleEventOperate(row.eventSysId, '2', row.equipmentId)
        }
      })
    },
    // 删除事件
    handleDelEvent (eventSysId) {
      let url = this.$base.getUrl('jiaDelEvent')
      let params = {
        url: url,
        data: {
          eventSysId: eventSysId
        }
      }
      this.$store.dispatch('getForm', params).then((res) => {
        if (res.code === 0) {
          this.refreshTable()
          this.$message({
            type: 'success',
            message: '删除成功!'
          })
          this.refreshTable()
        }
      })
    },
    deleteEvent (row) {
      this.$confirm('确定删除这个事件?', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        this.handleDelEvent(row.eventSysId)
      }).catch(() => {
        this.$message({
          type: 'info',
          message: '已取消删除'
        })
      })
    }
  }
}
</script>

<style scoped>
.el-table {
  width: auto !important;
  text-align: center;
  margin: 10px;
}

.el-table >>> th {
  text-align: center;
}

.el-pagination {
  margin: 0 10px;
}
svg {
  display: block;
  margin: auto;
}
</style>

<style lang="less" scoped>
.list {
  /deep/ .el-card {
    width: 23%;
    margin: 10px 10px;
    .image {
      width: 240px;
      height: 200px;
      padding: 14px;
    }
  }
  padding: 0 20px;
  box-sizing: border-box;
  display: flex;
  flex-wrap: wrap;
  .type-list {
    color: white;
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    .item {
      line-height: 26px;
      width: 48%;
      .label {
        display: inline-block;
        width: 50px;
        text-align: center;
      }
      span {
        color: #7c8696;
      }
    }
  }
}
</style>
